<template>
  <a-layout class="console-contract-add-wrapper">
    <a-row class="head">
      <a-icon type="left" @click="$router.push('/thirdService')" />
      <a-col class="title">
        <strong>电子合同配置</strong>
      </a-col>
    </a-row>
    <a-row>
      <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
        <a-form-model-item>
          <div style="font-size:20px;font-weight:500;color:#000000;padding-left:200px">
            第三方服务信息
          </div>
        </a-form-model-item>
        <a-form-model-item ref="" label="服务商" prop="">
          <a-input value="阿里云" :disabled="true"></a-input>
        </a-form-model-item>
        <a-form-model-item ref="name" label="名称" prop="name">
          <a-input v-model="form.name"></a-input>
        </a-form-model-item>
        <a-form-model-item ref="projectId" label="账户名" prop="projectId">
          <a-input v-model="form.projectId"></a-input>
        </a-form-model-item>
        <a-form-model-item ref="secret" label="密钥" prop="secret">
          <a-input v-model="form.secret"></a-input>
        </a-form-model-item>
        <a-form-model-item ref="apiHost" label="接口域名" prop="apiHost">
          <a-input v-model="form.apiHost"></a-input>
        </a-form-model-item>
        <a-form-model-item ref="apiUrl" label="接口地址" prop="apiUrl">
          <a-input v-model="form.apiUrl"></a-input>
        </a-form-model-item>
        <a-form-model-item>
          <div style="font-size:20px;font-weight:500;color:#000000;padding-left:200px">
            服务收费信息
          </div>
        </a-form-model-item>
        <a-form-model-item ref="cost" label="价格" prop="cost">
          <div style="display: flex;">
            <a-input placeholder="如：职薪人" v-model="form.cost" style="width: 370px"></a-input>
            <span style="margin-left: 20px">元/条</span>
          </div>
        </a-form-model-item>
        <div style="display: flex;justify-content: flex-end;margin: 0 24px 24px 0;">
          <a-button type="primary" @click="onSubmit" style="margin-left: 10px;" v-if="isEdit">
            更新保存配置
          </a-button>
          <div v-else>
            <a-button @click="handleCancel" style="margin-left: 10px;">
              取消
            </a-button>
            <a-button type="primary" @click="onSubmit" style="margin-left: 10px;">
              保存
            </a-button>
          </div>
        </div>
      </a-form-model>
    </a-row>
  </a-layout>
</template>
<script>
import { addContract, getContract, editContract } from "./api";
export default {
  data() {
    return {
      prompt: "",
      form: {
        name: "",
        apiHost: "",
        apiUrl: "",
        cost: "",
        projectId: "",
        secret: ""
      },
      rules: {
        name: [{ required: true, message: "必填" }],
        apiHost: [{ required: true, message: "必填" }],
        apiUrl: [{ required: true, message: "必填" }],
        cost: [{ required: true, message: "必填" }],
        projectId: [{ required: true, message: "必填" }],
        secret: [{ required: true, message: "必填" }]
      },
      companyId: this.$store.state.hr.companyId,
      labelCol: { span: 5 },
      wrapperCol: { span: 8 },
      isEdit: false,
      editId: ""
    };
  },

  created() {
    this.isEdit = this.$route.query.isEdit;
    if (this.isEdit) {
      this.init();
    }
  },

  beforeDestory() {},
  methods: {
    handleCancel() {
      this.$router.push("/thirdService");
    },
    init() {
      getContract()
        .then(res => {
          this.form.name = res.data.name;
          this.form.apiHost = res.data.apiHost;
          this.form.apiUrl = res.data.apiUrl;
          this.form.cost = res.data.cost;
          this.form.projectId = res.data.projectId;
          this.form.secret = res.data.secret;
          this.editId = res.data.id;
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const data = {
            ...this.form
          };
          if (this.isEdit) {
            data.id = this.editId;
            editContract(data)
              .then(res => {
                this.$router.push("/thirdService");
                this.$message("保存成功");
              })
              .catch(err => {
                console.log("debug log --> ", err);
              });
          } else {
            addContract(data)
              .then(res => {
                this.$router.push("/thirdService");
                this.$message("保存成功");
              })
              .catch(err => {
                console.log("debug log --> ", err);
              });
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.console-contract-add-wrapper {
  .head {
    .anticon-left {
      z-index: 3;
      left: 24px;
      position: absolute;
      color: #d8d8d8;
      font-size: 24px;
      margin-top: 18px;
    }

    font-size: 16px;
    color: #000;
    font-weight: 500;
    text-align: center;
    line-height: 60px;
    height: 60px;
    border-bottom: 1px solid #e8e8e8;
  }
}
</style>
